html,body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}
*{
    margin: 0;
    padding: 0;
    user-select: none;
    cursor: default;
}
.canvas-ps-warp{
    position: relative;
    height: 100%;
    overflow: auto;
    width: 100%;
}
.box{
        min-width: 800px;
    }
    .box>div{
        box-sizing: border-box;
        border: solid 2px rgb(122, 122, 122);
    }
    #showmenu{
        display: none;
    }
    #showhistory{
        display: none;
    }
    .menu{
        position: fixed;
        left: 0px;
        top: 0;
        z-index: 50;
        width: 80px;
        background-color: #919090;
        height: 100%;
        text-align: center;
        color:white;
    }
    .work{
        margin-left: 80px;
        width: calc(100% - 80px);
        background-color: rgb(235, 235, 235);
        height: 100vh;
        overflow: scroll;
        position: relative;
        overflow: hidden;
    }
    /* 菜单 */
    .menubtn{
        text-align: center;
        display: inline-block;
        margin-top: 4px;
        width:30px;
        height:30px;
        margin-left: 4px;
        margin-bottom: 4px;
        color: white;
        text-decoration: none;
    }
    .menubtn:hover{
        color: #636262;
    }
    .menu span{
        font-size: 12px;
    }
    .menu>span>img{
        width:100%;
        height:100%;
    }
    .menu input{
        width: 50%;
    }
    .color_selector{
        display: inline-block;
        width: 2rem;
        height: 1rem;
        background-color: rgba(255,0,0,1);
    }
    /* 画布 */
    #canvas{
        position: absolute;
        border: solid 2px rgb(134, 134, 134);
        background-image: url("../imgs/grid.jpg");
    }
    /*弹出层*/
    .alert>div{
        position: fixed;
        border: solid 2px rgb(134, 134, 134);
        z-index: 10;
    }
    /*-----颜色调节----*/
    .color{
        display: none;
        width: 400px;
        height: 300px;
    }
    /*-----颜色选择----*/
    .color_select_box{
        position: fixed;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        overflow: hidden;
    }
    .color_select_box>canvas{
        display: none;
    }
    .windows{
        background-color: #F8F8F8;
        box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    }
    .windows>div{
        width: 98%;
        padding-left: 1rem;
        margin: 0.7rem auto;
        text-align: center;
        box-sizing: border-box;
    }
    .windows>h4{
        background-color: #8E8C8C;
        color: white;
        cursor: default;
    }
    .windows>h4>span{
        float: right;
        padding-right: 8px;
        padding-left: 8px;
        cursor: pointer;
    }
    .contr_color>h5{
        height: 30px;
        line-height: 30px;
        color: #5B5B5B;
        margin-top: 20px;
    }
    .contr_color input{
        width: 80%;
    }
    .submit{
        margin-top: 20px;
    }
    .submit>a{
        text-decoration: none;
        color: white;
        background-color: #767676;
        padding: 5px;
        border-radius: 4px;
        margin-right: 5%;
        margin-left: 5%;
    }
    .submit_color>a:hover{
        background-color: #555454;
    }
    #show_color_box{
        margin: 0 auto;
        width: 2rem;
        background-color: red;
        height: 2rem;
    }
    /*笔刷光标模拟*/
    .easer{
        position: absolute;
        background-color: white;
        width: 10px;
        height: 10px;
        z-index: 1;
        display: none;
    }
    /*保存窗口*/
    .save{
        width: 400px;
        height: 200px;
        display: none;
    }
    .contr_save>h5{
        margin: 10%;
    }
    .contr_save span{
        margin: 4px;
        cursor: default;
        border: solid 1px #CECECE;
    }
    /*通用窗口*/
    .default{
        width: 300px;
        height: 200px;
        display: none;
    }
    .default_cont{
        height: 120px;
    }
    .default_cont>p{
        text-align: left;
        cursor: default;
    }
    /*裁剪显示框*/
    .pscut-box{
        left: -200px;
        border: solid 2px red;
        position: absolute;
        display: none;
        cursor: move;
        background-color:rgba(0, 0, 0, 0.4);
    }
    .pscut-box::after{
        content: 'W: - + H: - +';
        background-color: red;
        border-radius: 20%;
        color: white;
        cursor: default;
        font-size: 14px;
        position: absolute;
        display: block;
        width: 80px;
        height: 14px;
        top: -16px;
    }
    /* 操作历史 */
    .history{
        position: fixed;
        z-index: 10;
        right: 0;
        padding: 8px 4px;
        border: solid 2px #acacac;
        color: #5B5B5B;
        text-align: center;
        background-color: rgb(235, 235, 235);
    }
    .history h4{
        background-color: rgb(199, 199, 199);
        
        padding: 4px 0;
    }
    .history a{
        display: block;
        padding: 8px 20px;
        border: solid 1px #c0c0c0;
        font-size: 12px;
        color: #5B5B5B;
        text-decoration: none;
    }